<template>
    <view class="card-fcst cards">
        <view class="card-title" @click="toggleFcst()">
            <view class="card-title-name df">
                未来预报
                <uv-icon
                    class="toggle"
                    :name="showFcst ? 'arrow-down' : 'arrow-up'"
                ></uv-icon>
            </view>
        </view>
        <template v-for="(item, index) in weatherFcst" :key="index">
            <view class="card-item" v-if="index == 0 || showFcst">
                <view class="date">
                    <view class="desc">
                        {{ dayjs(item.fxDate).locale('zh-cn').format('dddd') }}
                    </view>
                    <view class="day">
                        {{ dayjs(item.fxDate).format('MM月DD日') }}
                    </view>
                </view>
                <view class="icon">
                    <i :class="'qi-' + item.iconDay"></i>
                </view>
                <view class="tmp">
                    <span class="val">{{ item.tempMax }}°</span>
                    <span class="tmp-line"></span>
                    <span class="val">{{ item.tempMin }}°</span>
                </view>
            </view>
        </template>
    </view>
</template>

<script lang="ts" setup>
import { GetWeatherDay_API } from '@/server/home'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
const showFcst = ref(false)
const weatherFcst = ref([])
const toggleFcst = () => {
    showFcst.value = !showFcst.value
}
const getWeatherDailyFcst = async (days) => {
    const res = await GetWeatherDay_API(days)
    if (res.IsSuccess) {
        weatherFcst.value = res.Data.daily
    }
}
onLoad(() => {
    getWeatherDailyFcst(7)
})
</script>

<style lang="scss" scoped>
.card-fcst {
    background-color: #f7f8f9;

    .card-title {
        display: flex;
        align-items: baseline;
        justify-content: center;

        .card-title-name {
            font-size: 40rpx;
            font-weight: 500;
            line-height: 44rpx;
            color: #000000;
        }

        .toggle {
            margin-left: 20rpx;
        }
    }

    .card-item {
        display: flex;
        align-items: center;

        .date {
            flex: 2;

            .desc {
                font-size: 32rpx;
                color: #000000;
            }

            .day {
                font-size: 30rpx;
                line-height: 32rpx;
                color: rgba(0, 0, 0, 0.5);
                margin-top: 4px;
            }
        }

        .icon {
            flex: 1;
            font-size: 70rpx;
            color: #ffb60c;
        }

        .tmp {
            flex: 4;
            color: #000000;
            font-size: 36rpx;
            font-weight: 500;
            line-height: 1;
            display: flex;
            align-items: center;

            .val {
                text-align: center;
                padding-right: 0;
                flex: 0 0 100rpx;
                width: 0;
            }

            .tmp-line {
                display: inline-block;
                vertical-align: middle;
                height: 5px;
                border-radius: 5px;
                margin: 0;
                background-image: -webkit-linear-gradient(
                    to right,
                    #f18360,
                    #427bff
                );
                background-image: -o-linear-gradient(
                    to right,
                    #f18360,
                    #427bff
                );
                background-image: -moz-linear-gradient(
                    to right,
                    #f18360,
                    #427bff
                );
                background-image: linear-gradient(to right, #f18360, #427bff);
                flex: 1 0;
                width: 0;
            }
        }
    }
}
</style>
